IT1-2-2 Bilder i CSS

Læringsmål

• Endre kantlinjer på bilder
• Endre utsnitt av bilder
• La et bakgrunnsbilde fylle hele nettsiden

Kantlinjer

img {
  width: 200px;
  border: 15px solid burlywood;
}

Kantlinjer og avrundede bilder

img {
  width: 200px;
  border: 15px solid burlywood;
  border-radius: 20%;
}

Tilpasse bilde til rammen

img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  border: 15px solid red;
}

La bilder fylle HTML-elementet

img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border: 15px solid red;
}

Justere posisjon til bilder

img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  object-position: right;
  border: 15px solid red;
}

Bakgrunnsbilde som fyller nettsiden

html {
  background-image: url("BILDE.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  overflow: hidden;
}

100vh betyr 100 % av viewport height – vi setter altså høyden av html-elementet til hele høyden av det synlige vinduet i nettleseren.